
<template>
  
  <div>
      <div style="border:1px solid #20A0FF;width:60%">
        {{msgContent}}
      </div>
   

      
      
      <br/><br/>
      <div>
        <div style="margin: 20px;"></div>
        <div style="margin: 20px;">
            <el-radio class="radio" v-model="radio" label="1">{{upCount}}赞</el-radio>
            <el-radio class="radio" v-model="radio" label="0">{{downCount}}踩</el-radio>
        </div>
        <br/>
      <el-form :label-position="labelPosition" label-width="80px">
        <el-form-item label="我的评论:" >
          <div style="width:30%">
          <el-input v-model="mycomment" size="large" placeholder="请输入您的评论！"></el-input>
          </div>
          
          <br/>
          
          <div>
            <el-button type="primary" @click="open2">提交评论</el-button>
          </div>
        </el-form-item>
      </el-form><br/><br/>

  
    <div class="item" v-for="comment in comments" >
    <p>{{comment.text}}</p><br>
    </div>

      

  </div>      
  </div>
  </div>

</template>

<script>
import axios from 'axios'

const myApi = axios.create({
  baseURL: 'http://localhost:8081',
  withCredentials: true,
  headers: {
    'Accept' : 'application/json',
    'Content-Type': 'application/json',
  }
});

  export default {

    data() {
        return {
            labelPosition: 'right',
            msgContent:'',
            mycomment: '',
            radio:-1,
            upCount:0,
            downCount:0,
            comments: []
      
        }
    },
    methods: {
      open2() {
        var axiosThis = this;  
        myApi.get('/comment/addComment',
        {
           params:{
             'commonComment.text':axiosThis.mycomment,
             'commonComment.writerid':1,
             'commonComment.mid':1
           }
        })
                  .then(function(res){
                      console.log(res);
                  })
                  .catch(function(err){
                      console.log(err);
                  });
        
          this.$message({
            type: 'success',
            message: '评论成功!'
          });
      
      }
    },

    created: function() {
        // GET 
        // this.$http.get('http://localhost:8081/messages/queryOneMessage?poolid=1', { credentials: true }).then(response => {
        //     // success callback
        //     console.log(response);
        //     alert(response);
        //     this.pools = response.body;
        // }, response => {
        //     // error callback
        // });
        console.log("进来了");
        var axiosThis = this;
        axios.get('http://localhost:8081/messages/queryOneMessage?poolid=1')
                .then(function (response) {
                  //console.log(response);
                  axiosThis.msgContent = response.data.text;
                  axiosThis.upCount = response.data.upnum;
                  axiosThis.downCount = response.data.downnum;

                })
                .catch(function (error) {
                    console.log(error);
                });
        console.log("出来了");
        axios.get('http://localhost:8081/comment/getComments?mid=1')
        .then(function (response) {
                  console.log(response);
                  axiosThis.comments=response.data;
                  console.log(axiosThis.comments[1]);
                })
                .catch(function (error) {
                    console.log(error);
                });
        
    }


  }

</script>

<style>


</style>